<script setup lang="ts">
import { onMounted, ref, watch } from "vue";
import { message } from "@/utils/message";
import { FormInstance } from "element-plus";
import {
  addPlatform,
  copyPlatform,
  LabPlatformVO,
  listPlatforms,
  setDefaultPlatform,
  updatePlatform
} from "@/api/LabPlatformApi";
import { Device, listDevices } from "@/api/deviceApi";
import { list } from "@/router/enums";

const props = defineProps({
  visible: {
    type: Boolean,
    default: false
  },
  data: {
    type: Object as () => LabPlatformVO,
    default: () => {
      return {};
    }
  }
});

const ruleFormRef = ref<FormInstance>();
const allPlatforms = ref<Array<LabPlatformVO>>([]);
const allDevices = ref<Array<Device>>([]);

const formVisible = ref(false);
const formData = ref(props.data);
const emit = defineEmits(["update:visible", "add-item"]);
const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  await formEl.validate(async valid => {
    if (valid) {
      let ret;

      if (formData.value.expId) {
        ret = await updatePlatform(formData.value);
      } else if (formData.value.copyFrom) {
        ret = await copyPlatform(formData.value);
      } else {
        ret = await addPlatform(formData.value);
      }
      if (ret.errorCode !== 0) {
        message(ret.message, { type: "error" });
      } else {
        if (formData.value.isDefault) {
          await setDefaultPlatform(ret.data.id);
        }
        message("提交成功", { type: "success" });
        resetForm(formEl);
        formVisible.value = false;
        emit("add-item");
      }
    }
  });
};
const getLabPlatformData = async () => {
  const result = await listPlatforms();
  allPlatforms.value = result.data;
};
const getAllDevices = async () => {
  const result = await listDevices();
  allDevices.value = result.data;
};

onMounted(() => {
  getAllDevices();
  getLabPlatformData();
});

const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  formEl.resetFields();
};

const closeDialog = () => {
  console.log("closeDialog");
  formVisible.value = false;
  resetForm(ruleFormRef.value);
};

watch(
  () => formVisible.value,
  val => {
    emit("update:visible", val);
  }
);

watch(
  () => props.visible,
  val => {
    formVisible.value = val;
  }
);

watch(
  () => props.data,
  val => {
    formData.value = val;
  }
);

const rules = {
  name: [{ required: true, message: "请输入名称", trigger: "blur" }]
};
</script>

<template>
  <el-dialog
    v-model="formVisible"
    title="实验配置"
    :width="680"
    :before-close="closeDialog"
  >
    <!-- 表单内容 -->
    <el-form
      ref="ruleFormRef"
      :model="formData"
      :rules="rules"
      label-width="100px"
    >
      <el-form-item label="名称" prop="name">
        <el-input
          v-model="formData.name"
          :style="{ width: '480px' }"
          placeholder="请输入名称"
        />
      </el-form-item>
      <el-form-item label="描述" prop="desc">
        <el-input
          v-model="formData.desc"
          type="textarea"
          :style="{ width: '480px' }"
          placeholder="请输入描述"
        />
      </el-form-item>
      <el-form-item label="设备列表" prop="sensors">
        <el-table :data="formData.sensors">
          <el-table-column
            header-align="center"
            align="center"
            prop="name"
            label="名称"
          >
            <template #default="scope">
              <el-select
                v-model="scope.row.deviceId"
                class="m-2"
                placeholder="未配置"
                size="small"
                clearable
                :disabled="scope.row.disabled"
                @change="handleSelectChange(scope.row.deviceId, scope, Yindex)"
              >
                <el-option
                  v-for="item in allDevices"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                /> </el-select
            ></template>
          </el-table-column>
          <el-table-column
            header-align="center"
            align="center"
            prop="operate"
            label="操作"
          >
            <template #header>
              <el-button
                type="primary"
                size="small"
                @click="addSensor(Yindex)"
                circle
                >+</el-button
              >
            </template>
            <template #default="scope">
              <el-button
                size="small"
                type="danger"
                @click="handleDelete(Yindex, scope.row.deviceId)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </el-form-item>

      <!-- {{ formData }} -->
    </el-form>
    <template #footer>
      <el-button @click="closeDialog">取消</el-button>
      <el-button type="primary" @click="submitForm(ruleFormRef)">
        确定
      </el-button>
    </template>
  </el-dialog>
</template>
